<template>
	<div class="searchBox">
		<el-button type="danger" @click='handleDelete' :disabled='selectedList.length==0'>
			<span v-show='selectedList.length>0'>
				{{selectedList.length+' / '+(currentTotal || total)}}
			</span>
		批量删除
		</el-button>
		<slot name='btn'></slot>
		<el-button type="primary" @click='handleSearch'>搜索{{title}}</el-button>
		<slot name='txt'></slot>
		<div class='total'>
		 	共有 {{total}} 条数据
		 	<template v-if='privateTotal'>
		 		，{{total-privateTotal}} 张不是私密，
		 		{{privateTotal}} 张私密
		 	</template>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		name:'search',
		props:{
			selectedList:{
				type:Array
			},
			total:{
				type:Number
			},
			currentTotal:{
				type:Number
			},
			privateTotal:{
				type:Number
			},
			title:{
				default:'图片',
				type:String
			}

		},
		methods:{
			handleDelete(){
				this.$emit('delete');
			},
			handleSearch(){
				this.$emit('search');
			}
		}
	}
</script>
<style lang='stylus' scoped>
.searchBox{
	border: 1px solid #eee;
	box-shadow: 0px 0px 1px 1px #ddd;
	box-sizing: border-box;
	width: 100%;
	background: #f2f2f2;
	padding:1em 0;
	margin-bottom:1.3em;
	position: sticky;
	top: -21px;
	z-index: 99;
	display: flex;
	align-items:center;
	.el-switch{
		margin:0 1em;
	}
	.el-notification {
		width: 450px !important;
	}
	.el-input{
		width: 22%;
		margin-left: 1em;
	}
	.el-button{
		margin-left: 1em;
	}
	.total{
        padding: .5em 0;
        position: absolute;
        right: 1.3em;
        font-size: 15px;
    }
}
</style>